<template>
    <div class="select-goods-box">
        <div class="tools-box">
            <shop-cate v-model="search.cate_id" placeholder="商品分类"></shop-cate>
            <bi-input v-model="search.keyword"  placeholder="商品名称/商品ID" icon="fa fa-search" ></bi-input>
        </div>

        <bi-table :data="list" :loading="loading"  min-height="300" >
            
            <bi-table-column label="图片"  width="80" v-slot="{row}" >
                <bi-picture :src="row.picture_main" upload width="60" height="60" border />
            </bi-table-column>
            <bi-table-column label="商品名称" name="title" v-slot="{row}" >
                <div >
                    <b>{{row.title}}</b>
                    <div class="variant">{{variantParam(row.variant_param)}}</div>
                </div>
            </bi-table-column>
            <bi-table-column label="价格" name="price" v-slot="{row}" width="100" >
                <div >{{row.price}}</div>
            </bi-table-column>
            <bi-table-column label="状态" name="status_title" width="80" ></bi-table-column>
            <bi-table-column label="选择"  v-slot="{row}" width="80" >
                <bi-button type="primary" size="small" @click="select(row)" >选择</bi-button>
            </bi-table-column>
        </bi-table>
        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
    </div>
</template>
<script>
import shopCate from '../../../field/cate.vue';
import {debounce} from '@@/admin/assets/js/global.js';

export default{
    emits:['callback'],
    components: {
        shopCate,
    },
    data(){


        return {
            hotdata:this.$user.hotdata('shop-select-goods','goods_id',30),
            search:{
                cate_id:null,
                keyword:null,
            },
            list:[],
            loading:false,
            page:1,
            count:0,
            total:0,
            value:null,
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                this.getList(1);
            },1000),
            deep:true
        }       
    },
    methods:{
        select(row){
            this.hotdata.set(row);
            this.$emit('callback','GOODS#'+row.goods_id,row.title);
        },
        getList(page){
            if (page==1) this.value = null;
            this.loading = true;
            this.$status.set('page',this.page);
            this.$status.set('search',this.search);

            this.$ajax({
                url:this.$url({'app':'shop',controller:'admin.goods',action:'list'}),
                data:{
                    page_current:page,
                    ...this.search
                },
                success:(res)=>{
                    this.list = res.list;
                    this.count  = res.count;
                    this.total =res.total;
                },
                over:()=>{
                    this.loading = false;
                }
            })
        },
        variantParam(param){

            let str  = '';
            
            if (param && param.value){
                for(let i in param.value){
                    if (param.value[i]){
                        str  += ' ' +  param.value[i].title;
                    }
                } 
            }

            return str
        },
    },
    mounted(){
        this.list  = this.hotdata.getList();
    }
}
</script>


<style>
.select-goods-box .tools-box{
    display: flex;
    gap: 10px;
}

.select-goods-box .variant{
    font-size: 12px;
}
</style>